<template>
  <div class="app-container" >
    <el-form ref="form" label-position="top" :model="form" :rules="rules" label-width="80px">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="所属客户" prop="customerId">
            <el-select v-model="form.customerId" placeholder="请选择所属客户" class="w100" @change="handleCustomerChange" :disabled="form.disabled">
              <el-option
                v-for="item in customerList"
                :key="item.id"
                :label="item.companyName"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系人" prop="contactIds">
            <el-select v-model="contactList" placeholder="请选择联系人" multiple class="w100" @change="handleContactChange" >
              <el-option
                v-for="item in contactListByCustomerIdList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="销售流程" prop="salesProcess">
            <el-select v-model="form.salesProcess" placeholder="请选择销售流程" class="w100" >
              <el-option
                v-for="dict in dict.type.zxcrm_sales_process"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="商机名称(本人-客户名称-产品名字-日期)" prop="bussinessOpportunity">
            <el-input v-model="form.bussinessOpportunity" placeholder="请输入商机名称" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="商机类型" prop="businessOppportunityType">
            <el-select v-model="businessOppportunityTypeList" multiple placeholder="请选择商机类型" class="w100" @change="handleBusinessOppportunityType">
              <el-option
                v-for="dict in dict.type.zxcrm_business_opportunity_type"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="流感（三价）-预计成交数量" prop="trivalentInfluenzaEstimatedTransactionQuantity" v-if="businessOppportunityTypeList.includes('1')">
            <el-input v-model="form.trivalentInfluenzaEstimatedTransactionQuantity" v-number-format placeholder="请输入流感" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="流感（三价）-预计成交金额（元）" prop="trivalentInfluenzaEstimatedTransactionAmount"  v-if="businessOppportunityTypeList.includes('1')">
            <el-input v-model="form.trivalentInfluenzaEstimatedTransactionAmount" v-number-format placeholder="请输入流感" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="流感（三价）-实际成交数量" prop="trivalentInfluenzaActualTransactionQuantity"  v-if="businessOppportunityTypeList.includes('1')">
            <el-input v-model="form.trivalentInfluenzaActualTransactionQuantity" v-number-format placeholder="请输入流感" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="流感（三价）-实际成交金额（元）" prop="trivalentInfluenzaActualTransactionAmount"  v-if="businessOppportunityTypeList.includes('1')">
            <el-input v-model="form.trivalentInfluenzaActualTransactionAmount" v-number-format placeholder="请输入流感" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="流感（四价）-预计成交数量" prop="quadrivalentInfluenzaEstimatedTransactionQuantity" v-if="businessOppportunityTypeList.includes('2')">
            <el-input v-model="form.quadrivalentInfluenzaEstimatedTransactionQuantity" v-number-format placeholder="请输入流感" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="流感（四价）-预计成交金额（元）" prop="quadrivalentInfluenzaEstimatedTransactionAmount" v-if="businessOppportunityTypeList.includes('2')">
            <el-input v-model="form.quadrivalentInfluenzaEstimatedTransactionAmount" v-number-format placeholder="请输入流感" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="流感（四价）-实际成交数量" prop="quadrivalentInfluenzaActualTransactionQuantity" v-if="businessOppportunityTypeList.includes('2')">
            <el-input v-model="form.quadrivalentInfluenzaActualTransactionQuantity" v-number-format placeholder="请输入流感" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="流感（四价）-实际成交金额（元）" prop="quadrivalentInfluenzaActualTransactionAmount" v-if="businessOppportunityTypeList.includes('2')">
            <el-input v-model="form.quadrivalentInfluenzaActualTransactionAmount" v-number-format placeholder="请输入流感" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="水痘（预充）-预计成交数量" prop="prefilledChickenpoxEstimatedTransactionQuantity"  v-if="businessOppportunityTypeList.includes('3')">
            <el-input v-model="form.prefilledChickenpoxEstimatedTransactionQuantity" v-number-format placeholder="请输入水痘" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="水痘（预充）-预计成交金额（元）" prop="prefilledChickenpoxEstimatedTransactionAmount"  v-if="businessOppportunityTypeList.includes('3')">
            <el-input v-model="form.prefilledChickenpoxEstimatedTransactionAmount" v-number-format placeholder="请输入水痘" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="水痘（预充）-实际成交数量" prop="prefilledChickenpoxActualTransactionQuantity"  v-if="businessOppportunityTypeList.includes('3')">
            <el-input v-model="form.prefilledChickenpoxActualTransactionQuantity" v-number-format placeholder="请输入水痘" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="水痘（预充）-实际成交金额（元）" prop="prefilledChickenpoxActualTransactionAmount"  v-if="businessOppportunityTypeList.includes('3')">
            <el-input v-model="form.prefilledChickenpoxActualTransactionAmount" v-number-format placeholder="请输入水痘" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="水痘（西林）-预计成交数量" prop="penicillinChickenpoxEstimatedTransactionQuantity"  v-if="businessOppportunityTypeList.includes('4')">
            <el-input v-model="form.penicillinChickenpoxEstimatedTransactionQuantity" v-number-format placeholder="请输入水痘" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="水痘（西林）-预计成交金额（元）" prop="penicillinChickenpoxEstimatedTransactionAmount" v-if="businessOppportunityTypeList.includes('4')">
            <el-input v-model="form.penicillinChickenpoxEstimatedTransactionAmount" v-number-format placeholder="请输入水痘" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="水痘（西林）-实际成交数量" prop="penicillinChickenpoxActualTransactionQuantity" v-if="businessOppportunityTypeList.includes('4')">
            <el-input v-model="form.penicillinChickenpoxActualTransactionQuantity" v-number-format placeholder="请输入水痘" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="水痘（西林）-实际成交金额（元）" prop="penicillinChickenpoxActualTransactionAmount" v-if="businessOppportunityTypeList.includes('4')">
            <el-input v-model="form.penicillinChickenpoxActualTransactionAmount" v-number-format placeholder="请输入水痘" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="肺炎（预充）-预计成交数量" prop="prefilledPneumoniaEstimatedTransactionQuantity" v-if="businessOppportunityTypeList.includes('5')">
            <el-input v-model="form.prefilledPneumoniaEstimatedTransactionQuantity" v-number-format placeholder="请输入肺炎" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="肺炎（预充）-预计成交金额（元）" prop="prefilledPneumoniaEstimatedTransactionAmount" v-if="businessOppportunityTypeList.includes('5')">
            <el-input v-model="form.prefilledPneumoniaEstimatedTransactionAmount" v-number-format placeholder="请输入肺炎" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="肺炎（预充）-实际成交数量" prop="prefilledPneumoniaActualTransactionQuantity" v-if="businessOppportunityTypeList.includes('5')">
            <el-input v-model="form.prefilledPneumoniaActualTransactionQuantity" v-number-format placeholder="请输入肺炎" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="肺炎（预充）-实际成交金额（元）" prop="prefilledPneumoniaActualTransactionAmount" v-if="businessOppportunityTypeList.includes('5')">
            <el-input v-model="form.prefilledPneumoniaActualTransactionAmount" v-number-format placeholder="请输入肺炎" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="肺炎（西林）-预计成交数量" prop="penicillinPneumoniaEstimatedTransactionQuantity" v-if="businessOppportunityTypeList.includes('6')">
            <el-input v-model="form.penicillinPneumoniaEstimatedTransactionQuantity" v-number-format placeholder="请输入肺炎" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="肺炎（西林）-预计成交金额（元）" prop="penicillinPneumoniaEstimatedTransactionAmount" v-if="businessOppportunityTypeList.includes('6')">
            <el-input v-model="form.penicillinPneumoniaEstimatedTransactionAmount" v-number-format placeholder="请输入肺炎" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="肺炎（西林）-实际成交数量" prop="penicillinPneumoniaActualTransactionQuantity" v-if="businessOppportunityTypeList.includes('6')">
            <el-input v-model="form.penicillinPneumoniaActualTransactionQuantity" v-number-format placeholder="请输入肺炎" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="肺炎（西林）-实际成交金额（元）" prop="penicillinPneumoniaActualTransactionAmount" v-if="businessOppportunityTypeList.includes('6')">
            <el-input v-model="form.penicillinPneumoniaActualTransactionAmount" v-number-format placeholder="请输入肺炎" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="EV71（预充）-预计成交数量" prop="prefilledEv71EstimatedTransactionQuantity" v-if="businessOppportunityTypeList.includes('7')">
            <el-input v-model="form.prefilledEv71EstimatedTransactionQuantity" v-number-format placeholder="请输入EV71" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="EV71（预充）-预计成交金额（元）" prop="prefilledEv71EstimatedTransactionAmount" v-if="businessOppportunityTypeList.includes('7')">
            <el-input v-model="form.prefilledEv71EstimatedTransactionAmount" v-number-format placeholder="请输入EV71" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="EV71（预充）-实际成交数量" prop="prefilledEv71ActualTransactionQuantity" v-if="businessOppportunityTypeList.includes('7')">
            <el-input v-model="form.prefilledEv71ActualTransactionQuantity" v-number-format placeholder="请输入EV71" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="EV71（预充）-实际成交金额（元）" prop="prefilledEv71ActualTransactionAmount" v-if="businessOppportunityTypeList.includes('7')">
            <el-input v-model="form.prefilledEv71ActualTransactionAmount" v-number-format placeholder="请输入EV71" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="EV71（西林）-预计成交数量" prop="penicillinEv71EstimatedTransactionQuantity" v-if="businessOppportunityTypeList.includes('8')">
            <el-input v-model="form.penicillinEv71EstimatedTransactionQuantity" v-number-format placeholder="请输入EV71" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="EV71（西林）-预计成交金额（元）" prop="penicillinEv71EstimatedTransactionAmount" v-if="businessOppportunityTypeList.includes('8')">
            <el-input v-model="form.penicillinEv71EstimatedTransactionAmount" v-number-format placeholder="请输入EV71" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="EV71（西林）-实际成交数量" prop="penicillinEv71ActualTransactionQuantity" v-if="businessOppportunityTypeList.includes('8')">
            <el-input v-model="form.penicillinEv71ActualTransactionQuantity" v-number-format placeholder="请输入EV71" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="EV71（西林）-实际成交金额（元）" prop="penicillinEv71ActualTransactionAmount" v-if="businessOppportunityTypeList.includes('8')">
            <el-input v-model="form.penicillinEv71ActualTransactionAmount" v-number-format placeholder="请输入EV71" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="破伤风疫苗-预计成交数量" prop="tetanusVaccineEstimatedTransactionQuantity" v-if="businessOppportunityTypeList.includes('9')">
            <el-input v-model="form.tetanusVaccineEstimatedTransactionQuantity" v-number-format placeholder="请输入破伤风疫苗-预计成交数量" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="破伤风疫苗-预计成交金额（元）" prop="tetanusVaccineEstimatedTransactionAmount" v-if="businessOppportunityTypeList.includes('9')">
            <el-input v-model="form.tetanusVaccineEstimatedTransactionAmount" v-number-format placeholder="请输入破伤风疫苗-预计成交金额" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="破伤风疫苗-实际成交数量" prop="tetanusVaccineActualTransactionQuantity" v-if="businessOppportunityTypeList.includes('9')">
            <el-input v-model="form.tetanusVaccineActualTransactionQuantity" v-number-format placeholder="请输入破伤风疫苗-实际成交数量" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="破伤风疫苗-实际成交金额（元）" prop="tetanusVaccineActualTransactionAmount" v-if="businessOppportunityTypeList.includes('9')">
            <el-input v-model="form.tetanusVaccineActualTransactionAmount" v-number-format placeholder="请输入破伤风疫苗-实际成交金额" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="狂犬疫苗-预计成交数量" prop="rabiesVaccineEstimatedTransactionQuantity" v-if="businessOppportunityTypeList.includes('10')">
            <el-input v-model="form.rabiesVaccineEstimatedTransactionQuantity" v-number-format placeholder="请输入狂犬疫苗-预计成交数量" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="狂犬疫苗-预计成交金额（元）" prop="rabiesVaccineEstimatedTransactionAmount" v-if="businessOppportunityTypeList.includes('10')">
            <el-input v-model="form.rabiesVaccineEstimatedTransactionAmount" v-number-format placeholder="请输入狂犬疫苗-预计成交金额" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="狂犬疫苗-实际成交数量" prop="rabiesVaccineActualTransactionQuantity" v-if="businessOppportunityTypeList.includes('10')">
            <el-input v-model="form.rabiesVaccineActualTransactionQuantity" v-number-format placeholder="请输入狂犬疫苗-实际成交数量" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="狂犬疫苗-实际成交金额（元）" prop="rabiesVaccineActualTransactionAmount" v-if="businessOppportunityTypeList.includes('10')">
            <el-input v-model="form.rabiesVaccineActualTransactionAmount" v-number-format placeholder="请输入狂犬疫苗-实际成交金额" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="流脑四价-预计成交数量" prop="quadrivalentMeningococcalEstimatedTransactionQuantity" v-if="businessOppportunityTypeList.includes('11')">
            <el-input v-model="form.quadrivalentMeningococcalEstimatedTransactionQuantity" v-number-format placeholder="请输入流脑四价-预计成交数量" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="流脑四价-预计成交金额（元）" prop="quadrivalentMeningococcalEstimatedTransactionAmount" v-if="businessOppportunityTypeList.includes('11')">
            <el-input v-model="form.quadrivalentMeningococcalEstimatedTransactionAmount" v-number-format placeholder="请输入流脑四价-预计成交金额" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="流脑四价-实际成交数量" prop="quadrivalentMeningococcalActualTransactionQuantity" v-if="businessOppportunityTypeList.includes('11')">
            <el-input v-model="form.quadrivalentMeningococcalActualTransactionQuantity" v-number-format placeholder="请输入流脑四价-实际成交数量" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="流脑四价-实际成交金额（元）" prop="quadrivalentMeningococcalActualTransactionAmount" v-if="businessOppportunityTypeList.includes('11')">
            <el-input v-model="form.quadrivalentMeningococcalActualTransactionAmount" v-number-format placeholder="请输入流脑四价-实际成交金额" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="实际成交日期" prop="actualTransactionDate">
            <el-date-picker clearable style="width: 100%;"
              v-model="form.actualTransactionDate"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="请选择实际成交日期">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="预计回款金额（元）" prop="expectedCollectionAmount">
            <el-input v-model="form.expectedCollectionAmount" v-number-format placeholder="请输入预计回款金额" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="实际回款金额（元）" prop="actualCollectionAmount">
            <el-input v-model="form.actualCollectionAmount" v-number-format placeholder="请输入实际回款金额" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="备注" prop="remark">
            <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-row >
        <el-col :span="12" style="background-color: gainsboro;height: 30px;line-height: 30px;">
          <span>产品信息</span>
        </el-col>
        <el-col :span="12" style="background-color: gainsboro;height: 30px;line-height: 30px;text-align: right;">
          <el-button icon="el-icon-plus" type="text" @click="handleProduct">添加产品</el-button>
        </el-col>
    </el-row>
    <div style="height: 10px;"></div>
    <!-- 产品表格-->
    <el-table
      :data="form.productList || []"
    >
      <el-table-column label="产品名称" align="center" prop="name" show-overflow-tooltip min-width="100px" />
      <el-table-column label="价格" align="center" prop="price" />
      <el-table-column label="售价" align="center" prop="salePrice" min-width="100px">
        <template slot-scope="scope">
          <el-input-number v-model="scope.row.salePrice" :precision="2" @change="(value) => handleSalePriceChange(value,scope.row)" size="small" ></el-input-number>
        </template>
      </el-table-column>
      <el-table-column label="数量" align="center" prop="quantity" min-width="100px">
        <template slot-scope="scope">
          <el-input-number v-model="scope.row.quantity" @change="(value) => handleQuantityChange(value,scope.row)" size="small" ></el-input-number>
        </template>
      </el-table-column>
      <el-table-column label="合计" align="center" prop="totalPrice" />
      <el-table-column label="操作" align="center" prop="price" >
        <template slot-scope="scope">
          <el-button type="text" @click="handleProductDel(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-row type="flex" justify="space-between">
      <el-col :span="4">已选中<span style="color: blue;margin: 0 10px;">{{form.productList.length}}</span>种产品</el-col>
      <el-col :span="4">总金额:<span style="color: blue;margin: 0 10px;">{{form.productList.reduce((total,obj) => total + (obj['totalPrice'] || 0),0)}}</span>元</el-col>
    </el-row>
    <div slot="footer"  class="flex-right">
      <el-button type="primary" @click="submitForm"  >确 定</el-button>
    </div>
    <!-- 产品选择弹框-->
    <el-dialog :title="productParam.title" :visible.sync="productParam.open" width="1000px" append-to-body>
      <el-table
        ref="productMultipleTable"
        @select="handleProductSelectionChange"
        @select-all="handleSelectAll"
        :row-key="getRowKey"
        v-loading="productParam.loading"
        :data="productList"
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="产品名称" align="center" prop="name" min-width="300px" />
        <el-table-column label="编号" align="center" prop="identifier" />
        <el-table-column label="价格" align="center" prop="price" />
      </el-table>
      <div slot="footer"  class="flex-right" >
        <el-button type="primary" @click="submitProductSelection"  >确 定</el-button>
      </div>
    </el-dialog>
    </div>
  </div>
</template>

<script>
  import { getContactListByCustomerId } from "@/api/zxcrm/contact"
  export default{
    name:"businessUpdate",
    dicts: ['sys_normal_disable','zxcrm_business_opportunity_type','zxcrm_sales_process','zxcrm_business_opportunity_stage','zxcrm_permission_range','zxcrm_attention'],
    props:{
      form:{
        default:{}
      },
      customerList:{
        default:[]
      },
      productList:{
        default:[]
      },
      disabled:{
        default:false
      }
    },
    data() {
      return{
        contactList:[],
        contactListByCustomerIdList:[],
        businessOppportunityTypeList:[],
        gutter:20,
        productParam:{
           open: false,
           title: "",
           loading: false,
        },
        rowSelectFlag: false, // 防止selection-change事件干扰
        selectedIds: [],
        productSelectList:[],
        // 表单校验
        rules: {
          customerId:[
            {required:true,message:"所属客户是必填项",trigger:'blur'}
          ],
          salesProcess:[
            {required:true,message:"销售流程是必填项",trigger:'blur'}
          ],
          bussinessOpportunity:[
            {required:true,message:"商机名称(本人-客户名称-产品名字-日期)是必填项",trigger:'blur'}
          ],
          businessOppportunityType:[
            {required:true,message:"商机类型是必填项",trigger:'blur'}
          ],
          trivalentInfluenzaEstimatedTransactionQuantity:[
            {required:true,message:"流感（三价）-预计成交数量是必填项",trigger:'blur'}
          ],
          trivalentInfluenzaEstimatedTransactionAmount:[
            {required:true,message:"流感（三价）-预计成交金额（元）是必填项",trigger:'blur'}
          ],
          quadrivalentInfluenzaEstimatedTransactionQuantity:[
            {required:true,message:"流感（四价）-预计成交数量是必填项",trigger:'blur'}
          ],
          quadrivalentInfluenzaEstimatedTransactionAmount:[
            {required:true,message:"流感（四价）-预计成交金额（元）是必填项",trigger:'blur'}
          ],
          prefilledChickenpoxEstimatedTransactionQuantity:[
            {required:true,message:"水痘（预充）-预计成交数量是必填项",trigger:'blur'}
          ],
          prefilledChickenpoxEstimatedTransactionAmount:[
            {required:true,message:"水痘（预充）-预计成交金额（元）是必填项",trigger:'blur'}
          ],
          penicillinChickenpoxEstimatedTransactionQuantity:[
            {required:true,message:"水痘（西林）-预计成交数量是必填项",trigger:'blur'}
          ],
          penicillinChickenpoxEstimatedTransactionAmount:[
            {required:true,message:"水痘（西林）-预计成交金额（元）是必填项",trigger:'blur'}
          ],
          prefilledPneumoniaEstimatedTransactionQuantity:[
            {required:true,message:"肺炎（预充）-预计成交数量是必填项",trigger:'blur'}
          ],
          prefilledPneumoniaEstimatedTransactionAmount:[
            {required:true,message:"肺炎（预充）-预计成交金额（元）是必填项",trigger:'blur'}
          ],
          penicillinPneumoniaEstimatedTransactionQuantity:[
            {required:true,message:"肺炎（西林）-预计成交数量是必填项",trigger:'blur'}
          ],
          penicillinPneumoniaEstimatedTransactionAmount:[
            {required:true,message:"肺炎（西林）-预计成交金额（元）是必填项",trigger:'blur'}
          ],
          prefilledEv71EstimatedTransactionQuantity:[
            {required:true,message:"EV71（预充）-预计成交数量是必填项",trigger:'blur'}
          ],
          prefilledEv71EstimatedTransactionAmount:[
            {required:true,message:"EV71（预充）-预计成交金额（元）是必填项",trigger:'blur'}
          ],
          penicillinEv71EstimatedTransactionQuantity:[
            {required:true,message:"EV71（西林）-预计成交数量是必填项",trigger:'blur'}
          ],
          penicillinEv71EstimatedTransactionAmount:[
            {required:true,message:"EV71（西林）-预计成交金额（元）是必填项",trigger:'blur'}
          ],
          tetanusVaccineEstimatedTransactionQuantity:[
            {required:true,message:"破伤风疫苗-预计成交数量是必填项",trigger:'blur'}
          ],
          tetanusVaccineEstimatedTransactionAmount:[
            {required:true,message:"破伤风疫苗-预计成交金额（元）是必填项",trigger:'blur'}
          ],
          rabiesVaccineEstimatedTransactionQuantity:[
            {required:true,message:"狂犬疫苗-预计成交数量是必填项",trigger:'blur'}
          ],
          rabiesVaccineEstimatedTransactionAmount:[
            {required:true,message:"狂犬疫苗-预计成交金额（元）是必填项",trigger:'blur'}
          ],
          quadrivalentMeningococcalEstimatedTransactionQuantity:[
            {required:true,message:"流脑四价-预计成交数量是必填项",trigger:'blur'}
          ],
          quadrivalentMeningococcalEstimatedTransactionAmount:[
            {required:true,message:"流脑四价-预计成交金额（元）是必填项",trigger:'blur'}
          ],
        }
      }
    },
    created(){
      this.reset()
      this.getContactListByCustomerId(this.form.customerId)
      this.setData()
    },
    methods:{
      setData(){
        this.contactList = this.form.contactIds.split(',').map(x => parseInt(x))
        this.businessOppportunityTypeList = this.form.businessOppportunityType.split(',')
      },
      // 处理产品删除
      handleProductDel(row){
        this.removeSelection(row.productId)
        this.form.productList.splice(row,1)
      },
      // 处理售价变化
      handleSalePriceChange(value,row){
        row.totalPrice = Number(value) * Number(row.quantity)
      },
      // 处理售价变化
      handleQuantityChange(value,row){
        row.totalPrice = Number(value) * Number(row.salePrice)
      },
      //产品选择
      submitProductSelection(){
        this.productParam.open = false
      },
      /** 处理商机类型 */
      handleBusinessOppportunityType(e){
        this.form.businessOppportunityType = e.join(",")
      },
      // 处理联系人改变
      handleContactChange(e){
        this.form.contactIds = e.join(',')
      },
      /** 处理客户改变 */
      handleCustomerChange(e){
        this.getContactListByCustomerId(e)
      },
      getContactListByCustomerId(customerId){
        getContactListByCustomerId(customerId).then(res=>{
          this.contactListByCustomerIdList = res.data
        })
      },
      //单选事件
      handleProductSelectionChange(selection, row){
         if (this.rowSelectFlag) {
            this.rowSelectFlag = false;
            return;
          }
          const isSelected = selection.some(s => s.productId === row.productId);
          if (isSelected) {
            this.addProductInfo(selection, row)
            this.addSelection(row);
          } else {
            this.removeProductInfo(selection, row);
            this.removeSelection(row.productId);
          }
      },
      // 全选事件
        handleSelectAll(selection) {
          const currentPageIds = this.productList.map(item => item.productId);

          if (selection.length > 0) {
            // 添加当前页未选中的项
            selection.forEach(item => {
              if (!this.selectedIds.includes(item.productId)) {
                this.selectedIds.push(item.productId);
              }
            });
          } else {
            // 移除当前页所有项
            currentPageIds.forEach(productId => {
              this.removeSelection(productId);
            });
          }
        },
        // 添加选中项
        addSelection(row) {
          if (!this.selectedIds.includes(row.productId)) {
            this.selectedIds.push(row.productId);
            this.productSelectList.push(row)
          }
        },
        // 添加产品信息
        addProductInfo(selection, row){
          if(!this.selectedIds.includes(row.productId)){
            this.$set(row,"salePrice",Number(row.price))
            this.$set(row,"quantity",1)
            this.$set(row,"totalPrice",Number(row.price))
            this.form.productList.push(row)
          }
        },
        // 移除选中项
        removeSelection(productId) {
          const index = this.selectedIds.indexOf(productId);
          if (index > -1) {
            this.selectedIds.splice(index, 1);
            // 若当前页存在该项，更新UI状态
            const currentRow = this.productSelectList.find(row => row.productId == productId);
            if (currentRow) {
              this.$refs.productMultipleTable.toggleRowSelection(currentRow, false);
            }
          }
        },
        // 移除产品信息
        removeProductInfo(selection, row){
          const index = this.selectedIds.indexOf(row.productId)
          if(index > -1){
            // 删除产品
            this.form.productList = this.form.productList.filter(item => item.productId != row.productId);
          }
        },
        /** 表格数据加载完成后，设置选中状态 */
        setCheckedRows() {
           // 关键：数据渲染后回显选中状态
           this.$nextTick(this.updateSelection);
        },
        // 更新选中状态（核心回显逻辑）
        updateSelection() {
          this.$refs.productMultipleTable.clearSelection();
          this.productSelectList.forEach(row => {
            if (this.selectedIds.includes(row.productId)) {
              this.rowSelectFlag = true; // 加锁
              this.$refs.productMultipleTable.toggleRowSelection(row, true);
            }
          });
        },
        /** 获取行的唯一标识 */
        getRowKey(row){
          return row.productId
        },
        /** 处理产品弹框 */
        handleProduct(){
          this.productParam.open = true
          this.productParam.title = "添加产品"
          this.addSelectionForProdrctList(this.form.productList)
        },
        // 添加选中项
        addSelectionForProdrctList(productList) {
          // for(const row of productList){
          //   console.log("-----");
          //   if (!this.selectedIds.includes(row.productId)) {
          //     this.selectedIds.push(row.productId);
          //     const currentRow = this.productList.find(x => x.productId == row.productId)
          //     this.productSelectList.push(currentRow)
          //     // 若当前页存在该项，更新UI状态
          //     if (currentRow) {
          //       this.$refs.productMultipleTable.toggleRowSelection(currentRow, true);
          //     }
          //   }
          // }
        },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.id != null) {
              this.$emit('updateBusiness',this.form)

            } else {
               this.$emit('addBusiness',this.form)

            }
          }
        })
      },

      reset() {
        this.contactListByCustomerIdList=[]
        this.mainSalesProduct = []
        this.basicInfoForm = {
          id: null,
          companyName: null,
          companyAbbreviation: null,
          customerClassify: null,
          customerLevel: null,
          operateAddress: null,
          actualControllerId: null,
          vaccineDepartmentHeadId: null,
          purchaseDockingId: null,
          warehouseOperatorId: null,
          userId: null,
          financeId: null,
          area: null,
          customerType: null,
          competitor: null,
          mainSalesProduct: null,
          customerReloationship: null,
          customerOrganizationalRelationship: null,
          other: null,
          inoculationAmount: null,
          purchaseHeadId: null,
          customerStatus: null,
          customerSource: null,
          customerTransationAnalysis: null,
          specialRequirement: null,
          paymentCycle: null,
          medicinePaymentMethod: null,
          warehouseDelivery: null,
          supplierAbbreviation: null,
          saleHeadId: null,
          saleContactId: null,
          supplierStatus: null,
          supplierSource: null,
          supplierType: null,
          supplierLevel: null,
          supplierOrganizationalRelationship: null,
          supplierPolicySupport: null,
          loanCycle: null,
          supplierPaymentMethod: null,
          dealStatus: null,
          dealTime: null,
          nextContactTime: null,
          inputMethod: null,
          informationCompleteness: null,
          status: null,
          delFlag: null,
          createBy: null,
          createTime: null,
          updateBy: null,
          updateTime: null
        }
        this.resetForm("basicInfoForm")
      },
    }

  }
</script>

<style>
</style>
